<template>
  <div class="home-search-bar">
    <input type="text"
           class="input-search"
           v-model="searchText"
           @keydown.enter="doSearch">
    <button class="btn-search"
            @click="doSearch">搜索一下</button>
  </div>
</template>

<script>
import Util from "@/common/util"
export default {
  name: 'home-search-bar',
  data () {
    return {
      searchText: ''
    }
  },
  methods: {
    doSearch () {
      Util.searchAPI(this.$router, this.searchText)
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../themes/base.less";
.home-search-bar {
  max-width: 650px;
}

.input-search {
  height: @home-search-bar-height;
  width: 70%;
  box-sizing: border-box;
  border: solid 1px #dfe1e5;
  vertical-align: bottom;
  font-size: 1.2em;
  outline: none;
  border-top-left-radius: @home-search-bar-border-radius;
  border-bottom-left-radius: @home-search-bar-border-radius;
  padding: 20px;
}

.btn-search {
  width: 30%;
  height: @home-search-bar-height;
  box-sizing: border-box;
  color: white;
  background-color: @color-primary;
  font-size: 1.6em;
  border: none;
  outline: none;
  border-top-right-radius: @home-search-bar-border-radius;
  border-bottom-right-radius: @home-search-bar-border-radius;
}
</style>